<template>
  <div class="search-panel">
    <el-row :gutter="20" type="flex" justify="space-between" align="middle">
      <el-row :span="12">
        <el-breadcrumb separator=" ">
          <el-breadcrumb-item :to="{ path: '/' }">当前位置： 首页</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row :span="12">
        <el-input class="search-input" type="search" icon="search" size="small" placeholder="搜索商品"></el-input>
      </el-row>
    </el-row>
  </div>
</template>


<script>
  export default {
    name: 'search-panel',
    data() {
      return {}
    }
  }
</script>


<style lang="scss" scoped>
  @import "../assets/scss/color";
  .search-panel {
    // border: 1px dashed $theme-color;
    padding: 10px 20px;
    margin: 16px auto;
    border-radius: 2px;
    width: 100%;
    height: 90px;
    .search-input {
      transition: all .8s;
      &:hover {
        width: 101%;
      }
    }
  }
</style>
